﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>网站维护中</title>
    <script type="text/javascript" src="~/Common/js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="~/Common/js/vue.min.js"></script>
    <style>
        * {
            margin: 0;
            box-sizing: border-box;
            color: white;
        }
        #app {
            background-image: url('../../Common/images/people_town_dark.jpg');
            background-repeat: no-repeat;
            background-position: center center;
            background-size: 100% auto;
            background-attachment: fixed;
        }
        .logo{
            width:200px;
            height:100px;
            margin:0 auto;
        }
        .title{
            margin:100px auto;
        }
        .title h1{
            text-align:center;
            font-size:50px;
        }
        .title h3 {
            text-align: center;
        }
        .center{
            margin: 0 auto;
            text-align:center;
            width:1170px;
            height:200px;
        }
        .center .deadline{
            float:left;
            width:230px;
            height:106px;
            border:3px solid white;
            padding:2px 2px;
            margin:2px 2px;
        }
        .center .time{
            font-size:42px;
        }
        .center .time-lable{
            font-size:28px;
        }
        .contact-us {
            margin: 0 auto;
            width: 576px;
            height: 85px;
            padding:180px 0 0 0;
            text-align: center;
        }
        /*.contact-us .contact-cell{
            width:186px;
            height:75px;
            margin:3px;
            padding:2px;
            float:left;
        }
        .contact-us .contact-cell label {
           display:block;

        }
        .contact-us .contact-cell input {
            background-color: transparent;
            width: 186px;
            height: 43px;
            border: 3px solid white;
            outline: none;
        }
        .contact-us .contact-cell .button {
            background-color: transparent;
            width: 186px;
            height: 43px;
            border: 3px solid white;
        }
        .contact-us .contact-cell .button:hover {
            background-color: #83a83d;
            cursor: pointer;
        }
        .content-help{
            width:500px;
            margin:0 auto;
            text-align:center;
            font-weight:bold;
            font-size:16px;
        }*/
    </style>
</head>
<body style="background-color:#e4dfd6;">
    <div id="app" style="height:100vh;overflow:auto">
        <div class="logo">
        </div>
        <div class="title">
            <h1>我们很快回来</h1>
            <h3>We will come to you soon!</h3>
            <h3>因为<span id="reason">系统升级</span>，我们不得不离开一段时间。但是请相信：离别是为了更好的相遇，离开是为了带最好的自己回来。请等我们。</h3>
        </div>
        <div class="center">
            <div class="deadline">
                <div class="time time-week">0</div>
                <div class="time-lable">周</div>
            </div>
            <div class="deadline">
                <div class="time time-day">0</div>
                <div class="time-lable">天</div>
            </div>
            <div class="deadline">
                <div class="time time-hour">0</div>
                <div class="time-lable">时</div>
            </div>
            <div class="deadline">
                <div class="time time-minute">0</div>
                <div class="time-lable">分</div>
            </div>
            <div class="deadline">
                <div class="time time-second">0</div>
                <div class="time-lable">秒</div>
            </div>
        </div>
        @*<div class="contact-us">
            <div class="contact-cell">
                <label>姓名*</label>
                <input type="text" name="name" id="name" value="" required/>
            </div>
            <div class="contact-cell">
                <label for="email">email*</label>
                <input type="email" name="email" id="email" required/>
            </div>
            <div class="contact-cell">
                <label>&nbsp;</label>
                <input type="submit" name="submit" class="button" value="维护完成时提醒我" />
            </div>
        </div>
        <div class="content-help">
            <span>想在我们更新之后马上收到通知吗？请留下您的邮箱，我们将会在维护完成后第一时间通知您。</span>
        </div>*@
        <div class="contact-us">
            <span>{{website.name.value}}</span><br />
            <span>联系电话：{{website.phone.value}}</span>
            <span> 邮编：{{website.zip_code.value}}</span><br/>
            <span>{{website.copyright.value}}</span>
            <span>技术支持：{{website.tecnicalsupport.value}}</span>
        </div>
    </div>
</body>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            website: {
                phone: { value: "" },
                zip_code: { value: "" },
                name: { value: "" },
                copyright: { value: "" },
                tecnicalsupport: { value: "万通软件创新实验室" },
                startTime: {value:""}
            }
        },
        computed: {

        },
        methods: {
            interval: function () {
                var that = this;
                setInterval(function () {
                    var startTime = that.website.maintain_time.value;
                    var nowtime = new Date();
                    var time = startTime - nowtime;
                    if (time > 0) {
                        var week = parseInt(time / 1000 / 60 / 60 / 24 / 7);
                        var day = parseInt(time / 1000 / 60 / 60 / 24 % 7);
                        var hour = parseInt(time / 1000 / 60 / 60 % 24);
                        var minute = parseInt(time / 1000 / 60 % 60);
                        var second = parseInt(time / 1000 % 60);
                        $('.time-week').html(week);
                        $('.time-day').html(day);
                        $('.time-hour').html(hour);
                        $('.time-minute').html(minute);
                        $('.time-second').html(second);
                    } else {
                        //当到了系统提示的时间，但是网站并没有开启。发送提示邮件/短信给网站管理员? 
                        alert("由于某些原因，系统并未按时开启，请您继续等待！");
                        clearInterval(interval);
                    }
                }, 1000);
            }
        },
        created() {
            var that = this;
            $.post("api/free_value/get_website", null, function (res) {
                if (res.status == 10000) {
                    that.website = Object.assign(that.website, res.data);
                    that.interval();
                    return res;
                } else {

                }
            })
        }
    });

    //var startTime = new Date();
    //var str = "1";
    //$.post("api/free_value/get_website", null, function (res) {
    //    if (res.status == 10000) {
    //        startTime = res.data.maintain_time.value;
    //        str = res.data.maintain_reason.value;
    //        document.getElementById("reason").innerHTML = str;
    //        name = res.data.name.value;
    //        document.getElementById("webSiteName").innerHTML = name;
    //        tel = res.data.phone.value;
    //        document.getElementById("tel").innerHTML ="联系电话：" + tel;
    //    } else {

    //    }    
    //})
    //var interval = setInterval(function () {
    //    var nowtime = new Date();
    //    var time = startTime - nowtime;
    //    if (time > 0) {
    //        var week = parseInt(time / 1000 / 60 / 60 / 24 / 7);
    //        var day = parseInt(time / 1000 / 60 / 60 / 24 % 7);
    //        var hour = parseInt(time / 1000 / 60 / 60 % 24);
    //        var minute = parseInt(time / 1000 / 60 % 60);
    //        var second = parseInt(time / 1000 % 60);
    //        $('.time-week').html(week);
    //        $('.time-day').html(day);
    //        $('.time-hour').html(hour);
    //        $('.time-minute').html(minute);
    //        $('.time-second').html(second);
    //    } else {
    //        //当到了系统提示的时间，但是网站并没有开启。发送提示邮件/短信给网站管理员? 
    //        alert("由于某些原因，系统并未按时开启，请您继续等待！");
    //        clearInterval(interval);
    //    }
    //}, 1000);
    //var num = 0;
    //$('.button').bind('click', function () {
    //    num = 1;
    //    if (num > 0) {
    //        var _name = $('#name').val();
    //        var _emali = $('#email').val();
    //        if (_name.length == 0) {
    //            console.log("空的");
    //            $('#name').css("border-color", "red");
    //        };
    //        if (_emali.length == 0) {
    //            $('#email').css("border-color", "red");
    //        }
    //    } else {
    //        //姓名和邮箱验证成功后，通过json发送数据，此时提交按钮变为“发送中”状态，当接收到反回的“success”时
    //        //隐藏姓名、email、提交 的总div ，显示新的div，提示提交成功，感谢支持。
    //        num = 0;
    //    }
    //});
    //验证未完成，当点击提交按钮时，没有做出判断。
    //$(function () {
    //    $(":input[name='name']").blur(function () {
    //        var name = $(this).val();
    //        //当前姓名验证没有考虑到少数民族姓名中有“·”情况的存在，后期若有需要可以修改正则。
    //        var reg = /^[\u4E00-\u9FA5]{1,6}$/;
    //        if (reg.test(name)) {
    //            $("#name").css("border-color", "#9aa600");
    //            return true;
    //        } else {
    //            $("#name").css("border-color", "#df653e");
    //            return false;
    //        }
    //    });

    //    $(":input[name='email']").blur(function(){
    //        var email = $(this).val();
    //        var reg = /\w+[@@]{1}\w+[.]\w+/; 
    //        if (reg.test(email)) {
    //            $("#email").css("border-color", "#9aa600");
    //            return true;
    //        } else {
    //            $('#email').css("border-color", "#df653e");
    //            return false;
    //        }
    //    });
    // });








    //var query_data = {};
    //jQuery.ajaxSettings.data = {
    //    token: "qwertuyiadsfghjk"
    //}
    //function request(method) {
    //    var require_json;
    //    try {
    //        eval("require_json = " + $("#require").val());
    //        var url = $("#url").val();
    //        $("#website").html("接口" + url + "请求已发送");
    //        $[method]("/api/" + url, require_json, function (res) {
    //            console.log(res);
    //            $("#website").html(JSON.stringify(res, null, 4));
    //        });
    //    } catch (err) {
    //        $("#website").html(err.message);
    //    }
    //}
    //$("#get_btn").click(function () {
    //    request("get");
    //});
    //$("#post_btn").click(function () {
    //    request("post");
    //});
    //$("#update_database_btn").click(function () {
    //    $("#url").val("database/init");
    //    request("post");
    //});
    //$("#add_btn").click(function () {
    //    $("#url").val("database/init");
    //    request("post");
    //});
    //$("#delete_btn").click(function () {
    //    $("#url").val("database/init");
    //    request("post");
    //});

    //$("#require").val("{\n\t\n\t\"exemption\": 1 // 1免检，0有权限检测\n}");
</script>
</html>
